<template>
	<view>

		<view class="px-4 py-2 position-fixed top-0 wid100 box-b heade bg-white" style="z-index: 99999;">
			<view @tap="toBack">
				<u-search :clearabled="false" placeholder="输入公寓名" :showAction="false" v-model="keyword">
				</u-search>
			</view>
			<view class="flex align-center justify-between screen-box" style="width: 100%;padding-top: 20rpx;">
				<view class="flex align-center" @tap="open('school')" v-if="isSchool">
					<view style="color: #484848;font-size: 28rpx;">学校</view>
					<image src="../../static/index/down-icon.png" mode="" style="width: 16rpx;height: 16rpx;"></image>
				</view>
				<view class="flex align-center" @tap="open('price')">
					<view style="color: #484848;font-size: 28rpx;">价格</view>
					<image src="../../static/index/down-icon.png" mode="" style="width: 16rpx;height: 16rpx;"></image>
				</view>
				<view class="flex align-center" @tap="open('condition')">
					<view style="color: #484848;font-size: 28rpx;">筛选</view>
					<image src="../../static/index/saixuan.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
				</view>
				<view v-if="!isSchool"></view>
			</view>
		</view>
		<view class="" :style="{height:search_height+'px'}"></view>

		
		<swiper style="padding: 30rpx;width:690rpx;height:180rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiperList" :key="index" style="width:100%;height:100%;">
				<image @tap="bindBanner(item)" :src="item.image" mode="" style="width: 100%;height:100%;border-radius: 10px;">
			</swiper-item>
			
		</swiper>
		
		<view class="ml-3 mr-3 pt-3 pb-3" v-for="(item,index) in dataList" :key="index"
			style="border-bottom: 1px solid #F6F6F6;">
			<view>
				<view class="flex justify-between align-center"
					@click="jump({url:`/pages/apartmentDetail/apartmentDetail?id=${item.id}`})">
					<image style="width: 280rpx;height: 180rpx;border-radius: 4px;" class="mr-3" :src="item.thumb"
						mode="">
					</image>
					<view class="flex flex-column flex-1 justify-between" style="height:180rpx;">

						<text class="font-28 fwb cl-1a text-one" style="width: 320rpx;">{{item.title}}</text>
						<view class="flex align-center">
							<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
							<text class="font-24 fw4 cl-aa text-one " style="width: 330rpx;">{{item.address}}</text>
						</view>
						<view class="flex flex-wrap">
							<blcok v-for="(label,labelIndex) in item.labels">
								<view v-if="labelIndex < 3" :key="labelIndex"
									class="flex align-center py-1 px-1 rounded-10 mr-1 mb-1"
									:style="{backgroundColor:label.color}">
									<text class="font-20" :style="{color:'#fff'}">{{label.title}}</text>
								</view>
							</blcok>
							

						</view>
						<view class="flex align-end">
							<text class="font-20 fw5" style="color: #C40E0E;">{{item.currency}}</text>
							<text class="font-28 fw5"
								style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
							<text class="font-20 fw4 cl-88">起 /周</text>
						</view>
					</view>
				</view>
				<view class="school-info" style="background-color: #FBFBFB ;margin-top: 30rpx;"
					v-if="item.school_info.distance">
					<view class="m-2 text-one">
						<text style="color: #8F8F8F;font-size: 24rpx;line-height: 24rpx;">距 {{schoolName}}{{item.school_info.distance}}km</text>
					</view>
					<view v-if="item.school_info.walk_time > 0 || item.school_info.ride_time > 0 || item.school_info.bus_time > 0 ||item.school_info.metro_time > 0" class="ml-2 flex align-center" style="padding-bottom: 20rpx;">
						<view class="flex align-center mr-3" v-if="item.school_info.walk_time > 0">
							<image src="../../static/activityDetail/bx.png" style="width: 30rpx;height: 30rpx;"
								class="mr-0_6" mode=""></image>
							<text class="font-24 fw4 cl-92">{{item.school_info.walk_time}}分钟</text>
						</view>
						<view class="flex align-center mr-3" v-if="item.school_info.ride_time > 0">
							<image src="../../static/activityDetail/qc.png" style="width: 30rpx;height: 30rpx;"
								class="mr-0_6" mode=""></image>
							<text class="font-24 fw4 cl-92">{{item.school_info.ride_time}}分钟</text>
						</view>
						<view class="flex align-center mr-3" v-if="item.school_info.bus_time > 0">
							<image src="../../static/activityDetail/gj.png" style="width: 30rpx;height: 30rpx;"
								class="mr-0_6" mode=""></image>
							<text class="font-24 fw4 cl-92">{{item.school_info.bus_time}}分钟</text>
						</view>
						<view class="flex align-center mr-3" v-if="item.school_info.metro_time > 0">
							<image src="../../static/activityDetail/dt.png" style="width: 25rpx;height: 25rpx;"
								class="mr-0_6" mode=""></image>
							<text class="font-24 fw4 cl-92">{{item.school_info.metro_time}}分钟</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" text=" " icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="!dataList.length">
		</u-empty>

		<u-popup :show="show" mode="top" @close="close" @open="open" :safeAreaInsetBottom="false">
			<view style="background-color: #fff;">
				<view :style="{height:search_height+'px'}"></view>
				<view v-show="type == 'school'">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 340rpx;padding: 40rpx 0;">
						<view class="school">
							<view v-for="(item,index) in schoolList" :key="index" @tap="choiceSchool(item)">
								<view style="color: #2D2D2D;font-size: 28rpx;">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex flex-row-reverse pb-1" style="height: 50rpx;">
						<view class="button-left mr-3" style="padding:8rpx 30rpx;font-size: 20rpx;line-height: 36rpx;"  @tap="eliminate1">清除筛选</view>
					</view>
				</view>
				<view class="price" v-show="type == 'price'">
					<view @tap="changePrice(1)">价格从低到高</view>
					<view @tap="changePrice(2)">价格从高到低</view>
				</view>
				<view class="condition" v-show="type == 'condition'">
					<view style="color: #343434;font-size: 28rpx;font-weight: bold;padding: 40rpx 0;">价格区间</view>
					<view class="flex align-center">
						<input type="number" v-model="requestData.min_price" placeholder="最小值"
							placeholder-style="color: #CBCBCB;font-size: 28rpx;"
							style="text-align: center;border-bottom: 1px solid #EFEFEF;">
						<view style="font-size: 28rpx;color: #343434;margin: 0 60rpx;">至</view>
						<input type="number" v-model="requestData.max_price" placeholder="最大值"
							placeholder-style="color: #CBCBCB;font-size: 28rpx;"
							style="text-align: center;border-bottom: 1px solid #EFEFEF;">
					</view>
					<view style="color: #343434;font-size: 28rpx;font-weight: bold;padding: 40rpx 0;">公寓设施</view>
					<view class="label-box">
						<view class="label-item" v-for="(item,index) in facilityData" :key="index"
							@tap="choiceLabel(item)">
							<view class="item"
								:class="{activeLabel:labelItem.find(({id})=>id === item.id) ? true : false}">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="button">
						<view class="button-left" @tap="eliminate">清除</view>
						<view class="button-right" @tap="lookup">查找</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_height: 0,
				isSchool: true, //是否切换学校
				show: false,
				type: null, //类型
				cityData: {
					name:''
				}, //城市信息
				schoolList: [], //学校列表
				schoolName:'',//学校名称
				facilityData: [], //公寓设施
				labelItem: [], //选择标签列表
				keyword: '',
				requestData: {
					price_sort: 0, //价格排序 1-从低到高，2-从高到低
					min_price: '',
					max_price: '',
					facility_ids: '', //筛选-公寓设施id
					page: 1,
					pagesize: 20,
					school_id: '', //学校id
					city_id: '', //城市id
				},
				dataList: [], //公寓列表
				swiperList:[],
				total:0,
			}
		},
		onReachBottom() {
			console.log('触底事件')
				if(this.dataList.length >= this.total){
					return
				}
				this.requestData.page++
				this.getList()
			
			
		},
		onLoad(option) {
			if (option.cityData) {
				this.isSchool = true
				this.cityData = JSON.parse(decodeURIComponent(option.cityData))
				console.log('跳转参数', this.cityData)
				this.keyword = this.cityData.name
				this.requestData.city_id = this.cityData.id
				//获取列表
				this.getList()
				//获取学校
				this.getSchool(this.cityData.id)
			} else if (option.schoolData) {
				this.isSchool = false
				const schoolData = JSON.parse(decodeURIComponent(option.schoolData))
				this.keyword = schoolData.title
				this.schoolName = schoolData.title
				this.requestData.school_id = schoolData.id
				this.getList()
			} else if(option.city_id){
				this.isSchool = true
				
				this.requestData.city_id = option.city_id
				if(option.city_name){
					this.keyword = option.city_name
				}
				
				this.requestData.price_sort = option.price_sort
				this.requestData.min_price = option.min_price
				this.requestData.max_price = option.max_price
				this.requestData.facility_ids = option.facility_ids
				this.requestData.school_id = option.school_id
				
				//获取列表
				this.getList()
				//获取学校
				this.getSchool(this.requestData.city_id)
			} else if(option.school_id){
				this.isSchool = false
				
				this.requestData.city_id = option.city_id
				
				
				if(option.city_name){
					this.keyword = option.city_name
				}
				
				this.requestData.price_sort = option.price_sort
				this.requestData.min_price = option.min_price
				this.requestData.max_price = option.max_price
				this.requestData.facility_ids = option.facility_ids
				this.requestData.school_id = option.school_id
				
				//获取列表
				this.getList()
				//获取学校
				this.getSchool(this.requestData.city_id)
			}
			
			this.getFacility()
			const query = uni.createSelectorQuery().in(this)
			query.select('.heade').boundingClientRect(data => {
				this.search_height = data.height
			}).exec()
			
			this.get_search_banner()
		},
		onShareAppMessage(res) {
		    return {
		        title: '搜索详情',
		        path: '/pages/search/searchDetail?city_id='+this.requestData.city_id+'&city_name='+this.keyword+'&school_id='+this.requestData.school_id+'&price_sort='+this.requestData.price_sort+'&min_price='+this.requestData.min_price+'&max_price='+this.requestData.max_price+'&facility_ids='+this.requestData.facility_ids
		    }
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title: '搜索详情'
		    }
		},
		methods: {
			bindBanner(e) {
				console.log(e)
				if (e.goto_type == 1) {
					//公寓详情
					this.jump({
						url: `/pages/apartmentDetail/apartmentDetail?id=${e.goto_id}`
					})
				} else if (e.goto_type == 2) {
					//问题详情
					this.jump({
						url: `/pages/index/problem?id=${e.goto_id}`
					})
				}
			},
			get_search_banner(){
				this.$H.get(this.$api.get_search_banner).then(res => {
					console.log(res)
					if(res.code == 1){
						this.swiperList = res.data
					}
				})
			},
			open(type) {
				this.type = type
				this.show = true
			},
			close() {
				this.show = false
			},
			//选择学校
			choiceSchool(item) {
				console.log(item)
				this.requestData.school_id = item.id
				this.schoolName = item.title
				this.requestData.page = 1
				this.keyword = item.title
				this.getList()
				this.show = false
			},
			//选择标签
			choiceLabel(item) {
				const labelItem = this.labelItem.slice();
				const idx = labelItem.findIndex(({
					id
				}) => item.id === id);
				if (idx === -1) {
					labelItem.push(item);
					this.labelItem = labelItem;
					console.log(this.labelItem)
				} else {
					this.labelItem = labelItem.slice(0, idx).concat(labelItem.slice(idx + 1));
				}
			},
			//获取列表
			getList() {
				this.$H.post(this.$api.apartment_list, {
					...this.requestData
				}, {
					token: false
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						if(this.requestData.page == 1){
							this.dataList = res.data.list
						}else{
							this.dataList = [...this.dataList,...res.data.list]
						}
						this.total = res.data.total
					}
				})
			},
			//获取城市所有学校
			getSchool(city_id) {
				this.$H.post(this.$api.get_school_by_city, {
					city_id: city_id
				}, {
					token: false
				}).then(res => {
					this.schoolList = res.data
				})
			},
			//获取公寓设施
			getFacility() {
				this.$H.get(this.$api.get_facility, {}, {
					token: false
				}).then(res => {
					this.facilityData = res.data
				})
			},
			//查找
			lookup() {
				console.log(this.labelItem)
				const ids = this.labelItem.map(item => {
					return item.id
				})
				this.requestData.facility_ids = ids.join(',')
				this.requestData.page = 1
				this.getList()
				this.show = false
			},
			//清除
			eliminate() {
				this.labelItem = []
				this.requestData.max_price = ''
				this.requestData.min_price = ''
				this.requestData.facility_ids = ''
				this.getList()
				this.show = false
			},
			eliminate1(){
				this.requestData.school_id = ''
				this.getList()
				this.show = false
			},
			//价格
			changePrice(item) {
				this.requestData.price_sort = item
				this.requestData.page = 1
				this.getList()
				this.show = false
			},
			//点击搜索
			toBack() {
				uni.redirectTo({
					url: '/pages/search/search'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.heade {
		background: #FFFFFF;
		box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.03);
		border-radius: 0px 0px 20px 20px;
	}

	.school {
		padding: 0 30rpx;
	}

	.school>view {
		padding: 36rpx 20rpx;
		border-bottom: 1px solid #F9F9F9;
	}

	.school>view:last-child {
		border: none;
	}

	.price {
		padding: 30rpx 0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #484848;
	}

	.price>view {
		padding: 30rpx;
	}

	.condition {
		padding: 0 50rpx;
	}

	.label-box {
		display: flex;
		flex-wrap: wrap;
	}

	.label-item {
		margin-bottom: 20rpx;
		text-align: center;
		width: 25%;

		.item {
			text-align: center;
			padding: 16rpx 0;
			width: 150rpx;
			background: #F5F5F5;
			border-radius: 2px 2px 2px 2px;
			font-size: 26rpx;
			font-weight: 400;
			color: #989898;

			&.activeLabel {
				background: #FFB24B;
				color: #fff;
			}
		}

	}

	// .label-item>view {
	// 	text-align: center;
	// 	padding: 16rpx 0;
	// 	width: 150rpx;
	// 	background: #F5F5F5;
	// 	border-radius: 2px 2px 2px 2px;
	// 	font-size: 26rpx;
	// 	font-weight: 400;
	// 	color: #989898;
	// }

	.button {
		padding: 80rpx 0 36rpx 0;
		display: flex;
	}

	.button-left {
		padding: 20rpx 60rpx;
		background: #F5F5F5;
		border-radius: 2px 2px 2px 2px;
		font-size: 28rpx;
		font-weight: 400;
		color: #616161;
	}

	.button-right {
		margin-left: 20rpx;
		text-align: center;
		padding: 20rpx 0;
		flex: 1;
		background: #FAC278;
		border-radius: 2px 2px 2px 2px;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
